<template>
  <div class="cover-food-detail" @click="close">
    <div class="wrapper" @click.stop="">
      <div class="picture">
        <img v-lazy="food.image" alt="" />
        <i class="iconfont icon-arrow-left-bold" @click="close"></i>
        <p class="material">{{ food.info }}</p>
      </div>
      <div class="content">
        <h2 class="name">{{ food.name }}</h2>
        <div class="data">
          <span>月售 {{ food.sellCount }} 份</span>
          <span>好评率 {{ food.rating }}%</span>
        </div>
        <div class="price">
          <span class="now">￥{{ food.price }}</span>
          <span class="old" v-if="food.oldPrice">￥{{ food.oldPrice }}</span>
        </div>

        <div class="cart-control-wrapper">
          <CartControl :food="food"></CartControl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CartControl from "../../components/CartControl/CartControl"
export default {
  props: {
    food: Object,
  },
  methods: {
    close() {
      this.$emit("closeCoverFoodDetail")
    },
  },
  components: { CartControl },
}
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
.cover-food-detail {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.3);
  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30rem;
    height: 40rem;
    border-radius: 0.5rem;
    overflow: hidden;
    transform: translateX(-50%) translateY(-60%);
    background-color: #fff;
    .picture {
      position: relative;
      width: 100%;
      height: 30rem;
      background-image: url("http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750");
      background-size: auto 30rem;
      background-position: top center;
      img {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        height: 30rem;
      }
      i {
        position: absolute;
        top: 1.5rem;
        left: 1rem;
        font-size: 2rem;
        color: #fff;
      }
      p {
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        font-size: 1rem;
        color: rgb(233, 233, 233);
      }
    }
    .content {
      position: relative;
      height: 11rem;
      padding: 1.8rem;
      .name {
        line-height: 1.4rem;
        margin-bottom: 0.8rem;
        font-size: 1.4rem;
        font-weight: 700;
        color: #07111b;
      }
      .data {
        margin-bottom: 1.8rem;
        line-height: 1rem;
        height: 1rem;
        span {
          font-size: 1rem;
          color: #93999f;
          margin-right: 1.2rem;
        }
      }
      .price {
        .now {
          margin-right: 0.8rem;
          font-size: 1.4rem;
          color: #f01414;
        }
        .old {
          font-size: 1.2rem;
          color: #666;
          text-decoration: line-through;
        }
      }
      .cart-control-wrapper {
        position: absolute;
        right: 2rem;
        bottom: 2rem;
      }
    }
  }
}
</style>
